<template>
	<div :class="{fullscreen:fullscreen, loaded: loaded}" class="tinymce-container" :style="{width:containerWidth}">
		<textarea :id="tinymceId" class="tinymce-textarea" />
	</div>
</template>

<script>
	import plugins from './plugins'
	import toolbar from './toolbar'

	export default {
		name: 'Tinymce',
		props: {
			id: {
				type: String,
				default () {
					// return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
					return 'vue-tinymce-0'
				}
			},
			value: {
				type: String,
				default: ''
			},
			toolbar: {
				type: Array,
				required: false,
				default () {
					return []
				}
			},
			plugins: {
				type: Array,
				required: false,
				default () {
					return []
				}
			},
			menubar: {
				type: String,
				default: 'file edit insert view format table'
			},
			height: {
				type: [Number, String],
				required: false,
				default: 360
			},
			width: {
				type: [Number, String],
				required: false,
				default: 'auto'
			}
		},
		data() {
			return {
				loaded: false,
				hasChange: false,
				hasInit: false,
				tinymceId: this.id,
				fullscreen: false,
				languageTypeList: {
					'en': 'en',
					'zh': 'zh_CN',
					'es': 'es_MX',
					'ja': 'ja'
				}
			}
		},
		computed: {
			containerWidth() {
				const width = this.width
				if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'`
					return `${width}px`
				}
				return width
			}
		},
		watch: {
			value(val,old) {
				// console.log('val',val)
				// console.log('old',old)
				if(!old&&val.length > 10){
					this.hasChange = false
				}
				if (!this.hasChange&&this.hasInit) {
					this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ''))
				}
			}
		},
		mounted() {
			const _this = this
			this.initTinymce()
		},
		activated() {
			if (window.tinymce) {
				this.initTinymce()
			}
		},
		deactivated() {
			this.destroyTinymce()
		},
		destroyed() {
			this.destroyTinymce()
		},
		methods: {
			initTinymce() {
				const _this = this
				window.tinymce.init({
					selector: `#${this.tinymceId}`,
					images_upload_handler: async (blobInfo, succFun, failFun, progress) => {
						progress(0);
						/* uni云开发调用方法
							let fileName = +new Date() + ('000000' + Math.floor(Math.random() * 999999)).slice(-6);
							fileName += blobInfo.blob().type === 'image/jpeg' ? '.jpg' : '.png';
							const result = await uniCloud.uploadFile({
								filePath: blobInfo.blobUri(),
								cloudPath: fileName,
								onUploadProgress: progressEvent=> {
									progress(Math.round(
										(progressEvent.loaded * 100) / progressEvent.total
									));
								},
								success: (res) => {
									const tempFile = res.fileID;
									if(res.success){
										succFun(tempFile);
									}else{
										failFun('上传失败');
									}
								}
							});
						*/
						let data = new FormData();
						data.append('file', blobInfo.blob());

						let configs = {
							headers: {
								"Content-Type": "multipart/form-data;boundary=" + new Date().getTime()
							}
						};
						this.$axios.post('/upload/', data, configs).then((res) => {
							console.log(res)
							succFun(res.url);
						}).catch(function(error) {
							console.log(error)
							failFun('上传失败');
						})
					},
					language: this.languageTypeList['zh'],
					height: this.height,
					body_class: 'panel-body ',
					object_resizing: false,
					toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
					menubar: this.menubar,
					plugins: this.plugins.length > 0 ? this.plugins : plugins,
					end_container_on_empty_block: true,
					powerpaste_word_import: 'clean',
					code_dialog_height: 450,
					code_dialog_width: 1000,
					advlist_bullet_styles: 'square',
					advlist_number_styles: 'default',
					imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
					default_link_target: '_blank',
					link_title: false,
					nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
					fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
					font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
					// indentation: '2em',
          			init_instance_callback: editor => {
						//if (_this.value) {
						editor.setContent(_this.value || '')
						setTimeout(() => {
							this.loaded = true;
						}, 100)
						//}
						_this.hasInit = true
						editor.on('NodeChange Change KeyUp SetContent', () => {
							// console.log('setContent',this.hasChange)
							this.hasChange = true
							this.$emit('input', editor.getContent())
						})
					},
					setup(editor) {
						// editor.on('init', function(ed) {
						// 	console.log(ed);
						// 	ed.target.editorCommands.execCommand("fontName", false, "Arial");
						// });
						editor.on('FullscreenStateChanged', (e) => {
							_this.fullscreen = e.state
						})
					}

				});
			},
			destroyTinymce() {
				const tinymce = window.tinymce.get(this.tinymceId)
				if (this.fullscreen) {
					tinymce.execCommand('mceFullScreen')
				}

				if (tinymce) {
					tinymce.destroy()
				}
			},
			setContent(value) {
				window.tinymce.get(this.tinymceId).setContent(value)
			},
			getContent() {
				window.tinymce.get(this.tinymceId).getContent()
			},
			imageSuccessCBK(arr) {
				const _this = this
				arr.forEach(v => {
					window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tinymce-container {
		position: relative;
		line-height: normal;
	}

	.tinymce-container>>>.mce-fullscreen {
		z-index: 10000;
	}

	.tinymce-textarea {
		visibility: hidden;
		z-index: -1;
	}

	.editor-custom-btn-container {
		position: absolute;
		right: 4px;
		top: 4px;
		/*z-index: 2005;*/
	}

	.fullscreen .editor-custom-btn-container {
		z-index: 10000;
		position: fixed;
	}

	.editor-upload-btn {
		display: inline-block;
	}

	.mce-tinymce {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0) !important;
		border-color: #DCDFE6 !important;
	}

	.mce-top-part::before {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0) !important;
	}

	.mce-edit-area {
		border-color: #DCDFE6 !important;

		iframe {
			opacity: 0;
		}
	}

	.mce-statusbar {
		border-color: #DCDFE6 !important;
	}

	#mceu_27 {
		border-radius: 5px;
		overflow: hidden;
	}

	/* 菜单图标字体颜色 */
	.mce-ico {
		color: #7e8086 !important;
	}

	/* 选中项图标为白色 */
	.mce-btn.mce-active i {
		color: #fff !important;
	}

	/* 背景颜色图标 */
	i.mce-i-backcolor {
		color: #fff !important;
		background-color: #ff944c !important;
	}

	/* 字体颜色图标 */
	i.mce-i-forecolor {
		color: #ff944c !important;
		transform: scale(1.1);
	}

	.loaded iframe {
		opacity: 1;
	}
</style>
